<template>
    <view class="articleBox">
        <view class="articleTab flex_wrap row_between">
            <view class="flex_wrap">
                <view v-for="(item, index) in firstTab">
                    <view
                        class="firstType"
                        :key="item.value"
                        :class="{ firstTypeActive: styleFirstNum === index }"
                        @click="($event) => changeFirstType(index, item)"
                    >
                        {{ item.typeName }}
                    </view>
                    <view class="flex_wrap row_center">
                        <view
                            :class="{ lineBox: styleFirstNum === index }"
                        ></view>
                    </view>
                </view>
                <view>
                    <view
                        class="firstType"
                        :class="{ firstTypeActive: styleFirstNum === 1 }"
                        @click="($event) => personVideo()"
                    >
                        达人视频
                    </view>
                    <view class="flex_wrap row_center">
                        <view :class="{ lineBox: styleFirstNum === 1 }"></view>
                    </view>
                </view>
            </view>
            <u-icon
                name="arrow-right"
                label="更多"
                space="16rpx"
                labelSize="28rpx"
                labelColor="#777"
                color="#333"
                label-pos="left"
                size="24rpx"
                @click="more_video(styleFirstNum)"
            />
        </view>
        <u-gap height="2rpx" bgColor="#EAEAEA" />
        <view class="typeBox">
            <view v-for="(item1, index) in firstTab[styleFirstNum].typeChild">
                <view
                    class="secondaryType"
                    :key="item1.value"
                    :class="{ secondaryTypeActive: styleNum === index }"
                    @click="($event) => selectType(index, item1)"
                >
                    {{ item1.typeName }}
                </view>
            </view>
        </view>
        <!-- 列表 -->
        <view class="videos flex_wrap row_between">
            <view
                class="videos_list"
                v-for="(item, index) in dataList"
                :key="index"
                @click="itemClick(item)"
            >
                <view class="videos_detail">
                    <image
                        :src="item.videoCover"
                        class="videos-img"
                        mode="aspectFit"
                    ></image>
                    <image
                        src="/static/images/video.png"
                        class="videoIcon"
                    ></image>
                    <view class="videos-t flex_wrap">
                        <text class="videoIntro"
                            >{{ item.videoIntro }}
                            <text
                                style="
                                    padding: 0 10rpx 0 0;
                                    font-weight: 400;
                                    font-size: 24rpx;
                                    color: #588bf3;
                                "
                                v-for="v in tagList(item)"
                                @click="goToBiaoQian(v)"
                                >#{{ v }}</text
                            ></text
                        >
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import caches from "@/config/caches.js";
import { baseUrl } from "@/config/tendIdConfig";
import {
    getVideoCounselling,
    getVideoCounsellingLogin,
} from "@/api/enterprise.js";
export default {
    data() {
        return {
            dataList: [],
            styleFirstNum: 0,
            styleNum: 0,
            firstTab: [],
            secondTab: [
                {
                    title: "全部",
                },
            ],
        };
    },
    computed: {
        tagList() {
            return ({ tag }) => {
                return tag
                    ? tag.split(",").filter((ele) => ele && ele !== " ")
                    : [];
            };
        },
    },
    mounted() {
        this.getVideoTypeTree();
    },
    methods: {
        // 标签
        goToBiaoQian(tag) {
            this.$u.route({
                url: "/pages_video/video/index",
                params: {
                    styleFirstNum: 1,
                    tag,
                },
            });
        },
        personVideo() {
            this.styleFirstNum = 1;
            this.getPersonInfo(this.recordType);
        },
        async getPersonInfo() {
            const params = {
                pageNum: 1,
                pageSize: 6,
                recordType: 8,
                healthMaster: 1,
                tenantId: this.$tendId,
            };
            const result = uni.getStorageSync(caches.ACCESS_TOKEN)
                ? await getVideoCounsellingLogin(params)
                : await getVideoCounselling(params);
            this.dataList = result.data?.rows ?? [];
        },
        more_video(styleFirstNum) {
            this.$u.route({
                url: `/pages_video/video/index`,
                params: {
                    styleFirstNum,
                },
            });
        },
        getVideoTypeTree() {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url:
                    baseUrl +
                    "/customer/video_type_customer/open/getVideoTypeTree",
                method: "POST",
                header: {
                    Authorization: token,
                },
                data: {
                    parentId: 0,
                    typeModule: "0",
                },
                success(res) {
                    if ([991, 992, 401].includes(res.data.code)) {
                        uni.$u.toast(res.data.msg);
                        that.$store.commit("SET_LOGOUT");
                        uni.navigateTo({
                            url: "/pages/user/phone/indexApp",
                        });
                        return;
                    }
                    const result = res.data.data ?? [];
                    that.firstTab = result;
                    that.firstTabDetail = that.firstTab[0].typeChild;
                    that.videoTypeId = that.firstTabDetail[0].id;
                    that.getTeachPageVideoList(1, 6, that.videoTypeId);
                },
            });
        },
        async changeFirstType(index, item) {
            this.personVideoShow = false;
            console.log(index, item, "一级菜单");
            this.styleFirstNum = index;
            this.videoTypeId = item.id;
            this.item1 = item.typeChild[0];
            console.log(this.item1, "this.item1>>>");
            this.selectType(0, this.item1);
        },
        async selectType(index, item1) {
            this.styleNum = index;
            this.videoTypeId = item1.id;
            await this.getTeachPageVideoList(1, 6, this.videoTypeId);
            console.log(index, item1, "二级菜单");
        },
        itemClick(item) {
            uni.navigateTo({
                url: `/pages_video/videoNew/index?clickId=${item.id}`,
            });
        },
        getTeachPageVideoList(pageNum, pageSize, videoTypeId) {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url:
                    baseUrl +
                    "/customer/video_info_customer/open/pageVideoNoToken",
                method: "POST",
                header: {
                    Authorization: token,
                },
                data: {
                    pageNum,
                    pageSize,
                    recordType: 0,
                    videoTypeId,
                    // tenantId: this.$tendId,
					doYouOnlyWatchVideosWithProducts:'2',// 0 :只看带商品的的 1:看所有的 2:看不含商品的
                },
                success(res) {
                    if ([991, 992, 401].includes(res.data.code)) {
                        uni.$u.toast(res.data.msg);
                        that.$store.commit("SET_LOGOUT");
                        uni.navigateTo({
                            url: "/pages/user/phone/indexApp",
                        });
                        return;
                    }
                    const result = res.data.data?.rows ?? [];
                    that.dataList = result;
                },
            });
        },
    },
};
</script>

<style scoped lang="scss">
.articleBox {
    background: #ffffff;
    margin-bottom: 40rpx;
}
.articleTab {
    padding: 10rpx 20rpx 0 0;
    display: flex;
    flex-wrap: wrap;
}
.lineBox {
    /* 线条样式 */
    width: 48rpx;
    height: 4rpx;
    background: #1682ff;
}
.firstType,
.firstTypeActive {
    padding: 0 36rpx;
    height: 102rpx;
    color: #777777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
}
.firstTypeActive {
    color: #1682ff;
}
.typeBox {
    width: 100%;
    background-color: #fff;
    padding: 30rpx 38rpx 0;
    display: flex;
    flex-wrap: wrap;
}
.secondaryType,
.secondaryTypeActive {
    width: 176rpx;
    height: 64rpx;
    background: #f2f3f7;
    border-radius: 8rpx;
    color: #212f48;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    margin-right: 30rpx;
}
.secondaryTypeActive {
    background: #dcecff;
    border: 1rpx solid #1682ff;
    color: #1682ff;
}

.videos {
    padding: 32rpx;
    box-sizing: border-box;
    flex-flow: wrap;
}
.videos_list {
    width: 336rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
}
.videos_detail {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    position: relative;
}
.videos-img {
    width: 336rpx;
    height: 404rpx;
    border-radius: 16rpx;
}
.videoIcon {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    z-index: 10;
    top: 16rpx;
    right: 16rpx;
}
.videos-t {
    width: 100%;
    padding: 4rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
    .videoIntro {
        width: 100%;
        font-size: 28rpx;
        color: #3d3d3d;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}
.detail_t {
    display: block;
    width: 412rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 28rpx;
    color: #3d3d3d;
}
</style>
